<template>
    <div>
    <el-button @click="addQuestion" style="margin-top: 10px">添加题目</el-button>
    <div id="home1">
        <rate></rate>
    </div>
    </div>
</template>

<script>
/* eslint-disable vue/no-unused-components */
import Vue from 'vue'
import singleChoice from '@/components/singleChoice.vue'
import multipleChoice from '@/components/multipleChoice.vue'
import rate from '@/components/rate.vue'
import fillBlank from '@/components/fillBlank.vue'
export default ({
    data() {
        return {
            questionList: [[], [], [], [], []]
        }
    },
    components: {
        singleChoice,
        multipleChoice,
        rate,
        fillBlank
    },
    methods: {
        addQuestion() {
            this.appendComponent(multipleChoice);
        },
        appendComponent(component) {
            var instance = new Vue({
                el: document.createElement('question1'),
                render: h => h(component)
            });
            var home = document.getElementById('home1');
            home.appendChild(instance.$el);
        }
    },
    mounted() {

    }
})
</script>

<style scoped>
#home1 {
    margin-top: 20px;
    margin-left: 200px;
    height: 100%;
}
#example {
    display: none;
}
</style>